import React from 'react'
import { Row, Col, Table, Alert, Icon } from 'antd';

import GM from 'g2-mobile';
GM.Global.pixelRatio = 2;
const Util = GM.Util;

import PanelBox from '../../../components/PanelBox';

import createGM from '../../../utils/gm';
//import { chartData, pieData, barData } from '../../../../fake/chart2.js';
import api from '../../../api/platformdate';

import './index.less'

let Shape = GM.Shape;
let G = GM.G;


export default class PlatformData extends React.Component {
  constructor () {
    super()
  }


  state = { 
    data:[],
    yesterday:'',
    lastweek:'',
    lastmonth:'',
    chartDataUser: [
      {"time": '周一',"tem": 10,"city": "beijing"},
      {"time": '周二',"tem": 22,"city": "beijing"},
      {"time": '周三',"tem": 20,"city": "beijing"}
    ],
    chartDataOffice: [
      {"time": '周一',"tem": 10,"city": "beijing"},
      {"time": '周二',"tem": 22,"city": "beijing"},
      {"time": '周三',"tem": 20,"city": "beijing"}
    ],
    chartDataBalance: [
      {"time": '周一',"tem": 10,"city": "beijing"},
      {"time": '周二',"tem": 22,"city": "beijing"},
      {"time": '周三',"tem": 20,"city": "beijing"}
    ],
    chartDataAdv: [
      {"time": '周一',"tem": 10,"city": "beijing"},
      {"time": '周二',"tem": 22,"city": "beijing"},
      {"time": '周三',"tem": 20,"city": "beijing"}
    ],
    pieData:[{pointer: '开门使用率',value: 5, length:2,y:1.05}],
    barData:[
      {"time":"周一","tem":6.9,"city":"tokyo"},
      {"time":"周二","tem":9.5,"city":"tokyo"},
      {"time":"周三","tem":14.5,"city":"tokyo"},
      {"time":"周四","tem":18.2,"city":"tokyo"},
      {"time":"周五","tem":21.5,"city":"tokyo"},
      {"time":"周六","tem":25.2,"city":"tokyo"},
      {"time":"周日","tem":26.5,"city":"tokyo"}
    ],
  };
 

  bargraph = (params = {}) => {
        params={officeType:this.props.profile.user.officeType}

        api.get('/usercurve', {   //曲线图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            chartDataUser:data.data
          });
        });
        api.get('/officecurve', {   //曲线图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            chartDataOffice:data.data
          });
        });

        api.get('/balancecurve', {   //曲线图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            chartDataBalance:data.data
          });
        });
        api.get('/advcurve', {   //曲线图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            chartDataAdv:data.data
          });
        });
 } 

  componentWillMount () {
    this.bargraph({});
  }

  callback() {
  }
  render () {


    //自定义绘制数据的的形状
Shape.registShape('point', 'dashBoard', {
  getShapePoints:function(cfg){
    let x = cfg.x;
    let y = cfg.y;
    return [
      {x: x, y: y},
      {x: x, y: 0.5}
    ]
  },
  drawShape: function(cfg, canvas){
    let point1 = cfg.points[0];
    let point2 = cfg.points[1];
    point1 = this.parsePoint(point1);
    point2 = this.parsePoint(point2);
    G.drawLines([point1, point2], canvas, {
      stroke: '#18b7d6',
      lineWidth: 2
    });
    let text = cfg.origin._origin.value.toString();
    G.drawText(text+'%', cfg.center, canvas, {
      fillStyle: '#f75b5b',
      font:'30px Arial',
      textAlign: 'center',
      textBaseline: 'bottom'
    });
    G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, {
      fillStyle: '#ccc',
      textAlign: 'center',
      textBaseline: 'top'
    });
  }
});
const Pie = createGM(chart => {
  chart.source(this.state.pieData, {
    'value': {type: 'linear',min: 0,max: 15,tickCount: 6},
    'length': {type: 'linear',min: 0,max: 10},
    y: {type: 'linear',min: 0, max: 1}
  });
  chart.coord('polar',{
    inner: 0,
    startAngle: -1.25 * Math.PI,
    endAngle: 0.25 * Math.PI
  });
  //配置value轴刻度线
  chart.axis('value', {
    tickLine: {
      strokeStyle: '#b9e6ef',
      lineWidth: 2,
      value: -5
    },
    label: null,
    grid: null,
    line: null
  });
  chart.axis('y', false);
  //绘制仪表盘辅助元素
  chart.guide().arc([0,1.05],[4.8,1.05],{
    strokeStyle: '#18b7d6',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([5.2,1.05],[9.8,1.05],{
    strokeStyle: '#ccc',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([10.2,1.05],[15,1.05],{
    strokeStyle: '#ccc',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([0,1.2],[15,1.2],{
    strokeStyle: '#ccc',
    lineWidth:1
  });
  chart.guide().text([-0.5,1.3], '0.00%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.guide().text([7.5,0.7], '7.50%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.guide().text([15.5,1.3], '15.00%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.point().position('value*y').size('length').color('#18b7d6').shape('dashBoard');
  chart.render();
}, 218);

const LineUser = createGM(chart => {
  let defs = {
    time: {
      tickCount: 7,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };
  //配置time刻度文字样式
  let label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
    label: function (text, index, total) {
      let cfg = Util.mix({}, label);
      // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
      if (index === 0) {
        cfg.textAlign = 'start';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'end';
      }
      return cfg;
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
    label: {
      fontSize: 14
    }
  });
  chart.source(this.state.chartDataUser, defs);
  chart.line().position('time*tem').color('city').shape('smooth');
  chart.render();
}, 400);



const LineOffice = createGM(chart => {
  let defs = {
    time: {
      tickCount: 7,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };
  //配置time刻度文字样式
  let label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
    label: function (text, index, total) {
      let cfg = Util.mix({}, label);
      // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
      if (index === 0) {
        cfg.textAlign = 'start';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'end';
      }
      return cfg;
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
    label: {
      fontSize: 14
    }
  });
  chart.source(this.state.chartDataOffice, defs);
  chart.line().position('time*tem').color('city').shape('smooth');
  chart.render();
}, 400);


const LineBalance = createGM(chart => {
  let defs = {
    time: {
      tickCount: 7,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };
  //配置time刻度文字样式
  let label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
    label: function (text, index, total) {
      let cfg = Util.mix({}, label);
      // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
      if (index === 0) {
        cfg.textAlign = 'start';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'end';
      }
      return cfg;
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
    label: {
      fontSize: 14
    }
  });
  chart.source(this.state.chartDataBalance, defs);
  chart.line().position('time*tem').color('city').shape('smooth');
  chart.render();
}, 400);


const LineAdv = createGM(chart => {
  let defs = {
    time: {
      tickCount: 7,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };
  //配置time刻度文字样式
  let label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
    label: function (text, index, total) {
      let cfg = Util.mix({}, label);
      // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
      if (index === 0) {
        cfg.textAlign = 'start';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'end';
      }
      return cfg;
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
    label: {
      fontSize: 14
    }
  });
  chart.source(this.state.chartDataAdv, defs);
  chart.line().position('time*tem').color('city').shape('smooth');
  chart.render();
}, 400);



const Bar = createGM(chart => {
  chart.source(this.state.barData, {
    tem: {
      tickCount: 5
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('time', {
    label:{
      fontSize: 14
    },
    grid: null
  });
  chart.axis('tem', {
    label:{
      fontSize: 14
    }
  });
  chart.intervalStack().position('time*tem').color('city');
  chart.render();
}, 320);




    return (
      <div>
        <div style={{'marginBottom': '20px'}}>
          <Alert
            message="报表延迟友情提示"
            description="我们提供的报表都不是实时的，报表运算内容复杂，数据量庞大，不能实时计算获得结果。如有核算不准确的信息请及时通知我们。"
            type="info"
            showIcon
          />
        </div>
        <Row gutter={16} type="flex" justify="space-between">
          <Col xs={24} md={24}>
            <PanelBox title="近30天用户增长曲线图" bodyStyle={ {'padding': 0} }>
              <LineUser
                data={this.state.chartDataUser}
              />
            </PanelBox>
          </Col>
        </Row>
        <Row gutter={16} type="flex" justify="space-between">
          <Col xs={24} md={24}>
            <PanelBox title="近30天代理商增长曲线图" bodyStyle={ {'padding': 0} }>
              <LineOffice
                data={this.state.chartDataOffice}
              />
            </PanelBox>
          </Col>
        </Row>
        <Row gutter={16} type="flex" justify="space-between">
          <Col xs={24} md={24}>
            <PanelBox title="近30天平台收益曲线图" bodyStyle={ {'padding': 0} }>
              <LineBalance
                data={this.state.chartDataBalance}
              />
            </PanelBox>
          </Col>
        </Row>
        <Row gutter={16} type="flex" justify="space-between">
          <Col xs={24} md={24}>
            <PanelBox title="近30天广告投放曲线图" bodyStyle={ {'padding': 0} }>
              <LineAdv
                data={this.state.chartDataAdv}
              />
            </PanelBox>
          </Col>
        </Row>
      </div>
    )
  }
}
